<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/css/index.css">
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="app">
        <div>
            姓名：<input type="text" v-model="name">
            <el-button type="primary" @click="selectUserAll()">查询</el-button>
            <el-button type="success" @click="dialogFormVisibleI = true">新增</el-button>
            <el-button type="danger" @click="deleteAll()">删除</el-button>
        </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="users"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="USER_ID"
                        label="员工编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="登录账号"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="USER_NAME"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="USER_SEX"
                        label="性别"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="USER_PHONE"
                        label="联系方式"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="USER_EMAIL"
                        label="电子邮箱"
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="selectUser(scope.row)">修改</el-button>
                        <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 表单新增 -->
        <div>
            <el-dialog title="新增用户" :visible.sync="dialogFormVisibleI">
                <el-form :model="form">
                    <el-form-item label="姓名" >
                        <el-input v-model="form.userName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录账号" >
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" >
                        <el-input v-model="form.userSex" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" >
                        <el-input v-model="form.userPhone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱">
                        <el-input v-model="form.userEmail" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleI = false">取 消</el-button>
                    <el-button type="primary" @click="insertUser()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 表单修改 -->
        <div>
            <el-dialog title="修改用户" :visible.sync="dialogFormVisibleU">
                <el-form :model="user">
                    <el-form-item label="姓名" >
                        <el-input v-model="user.userName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="登录账号" >
                        <el-input v-model="user.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="user.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" >
                        <el-input v-model="user.userSex" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" >
                        <el-input v-model="user.userPhone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" >
                        <el-input v-model="user.userEmail" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleU = false">取 消</el-button>
                    <el-button type="primary" @click="updataUser()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[3, 5, 10]"
                    :page-size="number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dataCount">
            </el-pagination>
        </div>
    </div>
    <script type="text/javascript">
        var _this;
        var app = new Vue({
            el:"#app",
            data:{
                users : null,
                user : {
                    userId : "",
                    username : "",
                    password : "",
                    userName : "",
                    userPhone : "",
                    userEmail : "",
                    userSex : ""
                },
                multipleSelection: [],
                dialogFormVisibleI :false,
                dialogFormVisibleU :false,
                form : {
                    username : "",
                    password : "",
                    userName : "",
                    userPhone : "",
                    userEmail : "",
                    userSex : ""
                },
                name : "",
                pageIndex : 1,
                number : 3,
                dataCount : 0,
            },
            created:function(){
                this.selectUserAll();
            },
            methods:{
                handleSizeChange(val){
                    var _this = this;
                    _this.number = val;
                    _this.selectUserAll();
                },
                handleCurrentChange(val){
                    var _this = this;
                    _this.pageIndex = val;
                    _this.selectUserAll();
                },
                handleSelectionChange(val) {
                    var _this = this;
                    _this.multipleSelection = val;
                },

                selectUserAll : function(){
                    var _this = this;
                    $.ajax({
                        url : "/user",
                        type : "get",
                        data : {
                            name : _this.name,
                            pageIndex : _this.pageIndex,
                            number : _this.number,
                        },
                        dataType : "json",
                        success : function(data) {
                            _this.users=data.list;
                            _this.dataCount=data.object.dataCount;
                        },
                        error : function() {

                        }
                    });
                },

                insertUser(){
                    var _this = this;
                    $.ajax({
                        url : "/user",
                        type : "post",
                        data : _this.form,
                        dataType : "json",
                        success : function(data) {
                            _this.dialogFormVisibleI = false;
                            _this.selectUserAll();
                            _this.$message("新增成功");
                        },
                        error : function() {

                        }
                    });
                },

                selectUser : function(row){
                     var _this = this;
                     _this.user.userId = row.USER_ID;
                     _this.user.username = row.username;
                     _this.user.password = row.password;
                     _this.user.userName = row.USER_NAME;
                     _this.user.userEmail = row.USER_EMAIL;
                     _this.user.userPhone = row.USER_PHONE;
                     _this.user.userSex = row.USER_SEX;
                     _this.dialogFormVisibleU = true;
                },

                updataUser(){
                    var _this = this;
                    $.ajax({
                        url : "/user/updata",
                        type : "post",
                        data : _this.user,
                        dataType : "json",
                        success : function(data) {
                            _this.dialogFormVisibleU = false;
                            _this.selectUserAll();
                            _this.$message("修改成功");
                        },
                        error : function() {

                        }
                    });
                },

                deleteAll : function(){
                    var _this = this;
                    var list = _this.multipleSelection;
                    var arr = list.map(function(v){return v.USER_ID;});
                    $.ajax({
                        url : "/user",
                        type : "delete",
                        traditional: true,
                        data : {arr : arr},
                        dataType : "json",
                        success : function(data) {
                            _this.selectUserAll();
                            _this.$message("删除成功");
                        },
                        error : function() {

                        }
                    });
                },

                deleteUser : function(row){
                    var _this = this;
                    var id = row.USER_ID;
                    $.ajax({
                        url : "/user/delete",
                        type : "post",
                        data : {id : id},
                        dataType : "json",
                        success : function(data) {
                            _this.selectUserAll();
                            _this.$message("删除成功");
                        },
                        error : function() {

                        }
                    });
                }
            }

        });

    </script>
</body>
</html>